<template>
	<view class="order-status-page">
		<!-- 选项卡 -->
		<!-- 不传全部，传0已报价1已成交2未成交 -->
		<view class="tab-bar">
			<view :class="tab === 'all'? 'tab-item active' : 'tab-item'" @click="changeTab('all','')">
				全部
			</view>
			<view :class="tab ==='ybj'? 'tab-item active' : 'tab-item'" @click="changeTab('ybj',0)">
				已提交
			</view>
			<view :class="tab === 'ycj'? 'tab-item active' : 'tab-item'" @click="changeTab('ycj',1)">
				已回复
			</view>
			<!-- <view :class="tab === 'wcj'? 'tab-item active' : 'tab-item'" @click="changeTab('wcj',2)">
				未成交
			</view> -->
		</view>

		<view class="order-list">
			<view class="order-item" v-for="item in orderList" :key="item.id">
				<!-- 订单头部信息 -->
				<view class="order-header">
					<view class="order-no">订单号：{{item.orderno}}</view>
					<view class="order-status">{{statusFn(item.status)}}</view>
				</view>
				
				<!-- 客户信息 -->
				<view class="customer-info">
					<text>客户：{{item.customer_name}}</text>
					<text>电话：{{item.phone}}</text>
				</view>
				
				<!-- 商品列表 -->
				<view class="goods-list">
					<view class="goods-item" v-for="(goods, index) in item.order_info" :key="index">
						<view class="goods-info">
							<view class="goods-name">{{goods.goods_desc}}</view>
					
							<!-- <view class="goods-spec" v-if="goods.spec_info && goods.spec_info.length">
								<text v-for="(spec, sIndex) in goods.spec_info" :key="sIndex">
									{{spec.attr_name}}：{{spec.value_name}}
								</text>
							</view> -->
							<view class="goods-detail">
								<text class="goods-num">数量：{{goods.num}}</text>
								<text class="goods-price">单价：￥{{goods.price}}</text>
							</view>
						</view>
						<image class="goods-img" :src="goods.goods_big_img" mode="aspectFill"></image>
					</view>
				</view>
				
				<!-- 订单底部 -->
				<view class="order-footer">
					<text class="total-price">总价：<text class="price">￥{{item.total_price}}</text></text>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onShow,
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app"
	import {
		getOrderList
	} from "@/api/order.js"
	import {
		getUser
	} from "@/utils/token.js"
	import {
		throttle
	} from "@/utils/util.js"
	const status = ref(0)
	const tab = ref('all');
	const options = ref()
	onLoad((option) => {
		options.value = option
	})

	const changeTab = (newTab, status) => {
		tab.value = newTab;
		params.status = status
		orderList.value = []
		getList()
	};
	const params = {
		id: 0,
		status: '',
		page: 1,
		limit: 20
	}
	let user
	onShow(() => {
		user = getUser()
		params.id = user.id
		if (user.id) {
			if (options.value.tab) {
				changeTab(options.value.tab, options.value.status)
			} else {
				orderList.value = []
				getList()
			}

		}

	})
	const orderList = ref([])
	const count = ref(0)

	function statusFn(flag) {
		if (flag == 0) {
			return "已提交"
		} else if (flag == 1) {
			return "已回复"
		} 
		// else {
		// 	return "未回复"
		// }
	}

	function getList() {
		getOrderList(params).then(e => {
			orderList.value = orderList.value.concat(e.data.list)
			count.value = e.data.count
		})
	}

	function specFn(arr) {
		let str = "规格："
		for (let i = 0; i < arr.length; i++) {
			str += arr[i].value_name + " "
		}
		return str;
	}


	onReachBottom(() => {
		throttle(() => {
			// 分页
			if (orderList.value.length != count.value) {
				params.page++
				getList()
			}
		}, 2000)

	})
</script>

<style scoped>
	.order-status-page {
		background-color: #fff;
		width: 100%;
	}

	.order-list {
		
		padding: 20rpx;
	}

	.order-item {
		
		padding: 20rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.order-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		
	}

	.order-no {
		font-size: 28rpx;
		color: #666;
	}

	.order-status {
		padding: 5rpx 10rpx;
		border: 2rpx solid #E60012;
		font-size: 24rpx;
		border-radius: 10rpx;
		color: #E60012;
	}

	.customer-info {
		display: flex;
		justify-content: space-between;
		font-size: 26rpx;
		color: #666;
		margin-bottom: 20rpx;
	
	}

	.goods-list {
		
		margin-bottom: 20rpx;
	}

	.goods-item {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 20rpx;
		padding: 20rpx;
		background-color: #f8f8f8;
		border-radius: 10rpx;
	
	}

	.goods-info {
		flex: 1;
		margin-right: 20rpx;
		width: calc(100% - 140rpx);
	}

	.goods-name {
		font-size: 28rpx;
		margin-bottom: 10rpx;
	
	}

	.goods-spec {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 10rpx;
		
	}

	.goods-detail {
		display: flex;
		justify-content: space-between;
		font-size: 26rpx;
		color: #666;
		
	}

	.goods-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
	}

	.order-footer {
		text-align: right;
		padding-top: 20rpx;
		border-top: 1rpx solid #eee;
		
	}

	.total-price {
		font-size: 28rpx;
	}

	.price {
		color: #E60012;
		font-weight: bold;
	}

	.chat-custom-right {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.back-icon {
		font-size: 36rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.extra-icons {
		display: flex;
		align-items: center;
	}

	.icon-dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		background-color: #000;
		margin-right: 10rpx;
	}

	.icon-camera {
		font-size: 30rpx;
	}

	.tab-bar {
		display: flex;
		border-bottom: 1px solid #ccc;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 15rpx 0;
		font-size: 32rpx;
		color: #333;
	}

	.active {
		color: #fff;
		background-color: #E60012;
	}

	.order-info {
		flex: 1;
	}

	.product-info {
		margin-bottom: 10rpx;
	}

	.status-info {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.status-text {
		color: red;
		margin-bottom: 10rpx;
	}

	.status-badge {
		background-color: #E60012;
		color: #fff;
		border-radius: 10rpx;
		padding: 5rpx 10rpx;
	}

	.tip-text {
		color: #999;
		font-size: 28rpx;
	}

	.icon-placeholder {
		margin: 0 30rpx;
	}

	.headerSlot {
		width: 100rpx;
		height: 100rpx;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 100%;
	}
</style>